<template>
	<view class="zong">
		<view class="top">
		
			<view class="zuo" style="display: flex;">
				<u-icon name="arrow-left" color="#999" size="18"></u-icon>
				<view class=" ttop">
					<image src="/static/3.jpg" class="tx" />
					<view> 
						<view style="font-size: 28rpx; font-weight: 600; margin-top: 8px;">小帅锅Frankie</view> 
						<view style="color:#ccc; display: flex;">
							<u-icon name="map" size="18"  color="#ccc"></u-icon>
							<view style="font-size:24rpx;">畅饮无极限</view>
						</view> 
					</view>
				</view>
		
			</view>
			<!-- 关注 -->
			<view class="you" style="display: flex;">
				<view class="gz">关注</view>
				<u-icon name="share-square" size="45rpx" color="#999"></u-icon>
				
			</view>
		
		</view>
		
		<view class="box">
		
			
			
			<view class="sss">
				
				<!-- 轮播 -->
				<view style="margin-top: 30rpx; width:98% ">
					 <u-swiper :list="list" ></u-swiper>
				</view>
				
			
				<!--  -->
				<view class="nr">
					<view style="font-size:32rpx;font-weight: 600;color:#666;margin-bottom: 20rpx;">家人们，泰库辣!</view>
					<view style="font-size: 24rpx;color:#666;margin-bottom: 20rpx;">和朋友一起畅享唱歌的快乐，感受音乐的力量!歌声激荡，快乐洋溢，尽在我们的KTV之夜!
					</view>
					<view style="font-size:28rpx;font-weight: 600;color:#5fd9f8">#KTV #夜猫</view>
				</view>
				
				<view class="aas">7月14号 北京</view>
				
				<!-- 评论 -->
				<view class="aa">共计8555条评论</view>
				
				<view class="ping">
					<image src="/static/2.jpg" class="tx" />
					<view class="ccc">
						<input placeholder="爱评论的人运气不会差" />
				
					</view>
				</view>
				
				<view class="ping" v-for="item in plist" :key="item.id">
					<image :src="item.img" class="txs" />
					<view class="ww">
						<view>
							<view style="font-size: 24rpx; color:#ccc">{{item.name}}</view>
							<view style="font-size: 28rpx; color:#666">{{item.nr}}</view>
						</view>
						<view>
							<u-icon name="heart" color="#ccc" size="18"></u-icon>
							<view style="font-size: 28rpx; color:#999">{{item.zan}}</view>
						</view>
				
					</view>
				</view>
				
				
				
				
			</view>
		
			
		
		</view>
		
		<view class="bottom" style="display: flex;">
			
			<view class="cccs">
				<input placeholder="爱评论的人运气不会差" />
			</view>
			
			<view style="display: flex;justify-content: space-between;">
				<view style="display: flex;margin-right: 10px;">
					<u-icon name="heart" color="#ccc" size="18"></u-icon>
					<view style="font-size: 28rpx; color:#999">1.2万</view>
				</view>
				<view style="display: flex;margin-right: 10px;">
					<u-icon name="star" color="#ccc" size="18"></u-icon>
					<view style="font-size: 28rpx; color:#999">480</view>
				</view>
				<view style="display: flex;">
					<u-icon name="chat" color="#ccc" size="18"></u-icon>
					<view style="font-size: 28rpx; color:#999">3584</view>
				</view>
			</view>
			
			
		</view>
		
		
	</view>
	








</template>

<script lang="ts" setup>
	import { reactive } from "vue"

	const list = [
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
	]

	const plist = reactive([
		{ id: 0, name: '王晓晓', nr: "下地铁再走两步就到", zan: "650",img:"/static/4.jpg" },
		{ id: 1, name: '李红达', nr: "改天去看看", zan: "350",img:"/static/3.jpg" },
		{ id: 2, name: '王大拿', nr: "今天天气真好", zan: "550",img:"/static/5.jpg" },
		{ id: 3, name: '陈莉莉', nr: "走，出发", zan: "250",img:"/static/2.jpg" },
		{ id: 4, name: '李红达', nr: "改天去看看", zan: "350",img:"/static/3.jpg" },
		{ id: 5, name: '王大拿', nr: "今天天气真好", zan: "550",img:"/static/5.jpg" },
		{ id: 6, name: '陈莉莉', nr: "走，出发", zan: "250",img:"/static/2.jpg" },
	])
	
	
	const clickHandler = () => {
	  // #ifndef MP-WEIXIN
	  uni.$u.toast('请在微信小程序内查看效果');
	  // #endif
	};
</script>

<style>
	.zong{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.top {
		margin-top: 60rpx;
		width: 100%;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 10px;
	}
	
	
	.box {
		width: 100vw;
		height: calc(100vh - 120rpx);
		overflow: hidden;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
	}
	.sss{
		width: 100%;
		height:calc(100vh - 120rpx);
		overflow: auto;
	}


	.tx {
		margin-top: 6px;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}
	.txs {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		
	}

	.ttop {
		width: 400rpx;
		display: flex;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.you {
		line-height: 100rpx;
		height: 100rpx;

	}

	.you button {
		width: 160rpx;
		height: 60rpx;
		font-size: 28rpx;
		background: rgb(90, 144, 226);
		border-radius: 40rpx;
	}
	.gz{
		margin-right: 20rpx;
		margin-top: 10px;
		width: 120rpx;
		height: 60rpx;
		line-height: 58rpx;
		font-size: 28rpx;
		color: white;
		text-align: center;
		border-radius: 30rpx;
		background:#5a98f8;
	}

	.nr {
		margin: 40rpx;
	}

	.ping {
		width: 100%;
		height: auto;
		display: flex;
		margin-top: 40rpx;
	}

	.ww {
		font-size: 24rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.aa {
		font-size: 28rpx;
		color: #666;
		margin: 40rpx;
	}
	
	.aas {
		font-size: 24rpx;
		color: #ccc;
		margin: 40rpx;
	}

	.ccc {
		margin-bottom: 10rpx;
	}

	.ccc input {
		width: 600rpx;
		height: 72rpx;
		line-height: 70rpx;
		background: #f2f2f2;
		border-radius: 40rpx;
		font-size: 24rpx;
		text-indent: 40rpx;

	}
	.bottom{
		width: 100%;
		height:60px;
		line-height: 60px;
		background: white;
		
		position: fixed;
		bottom: 0;
		right: 0;
		left: 10px;
	}
	.cccs{
		margin-top: 10px;
		width: 300rpx;
		height: 72rpx;
		line-height: 60px;
		text-align: center;
		box-sizing: border-box;
		padding: 15rpx;
		background: #f2f2f2;
		border-radius: 40rpx;
		font-size: 24rpx;
		margin-right: 30px;
		
	}
</style>